/**
 * 功能描述: 基础button变量抽取
 * @author 赵常畅
 * @date 2022/9/20 15:19
 * @version 1.0
 */

@import "../../style/variable";

/* button
---------------------------------*/
/* 基础按钮 */
$--btn-color: $color-text-primary;
$--btn-border-color: $border-color-base;
$--btn-background-color: $color-white;
$--btn-shadow-color: rgba(0, 0, 0, 0.015);
$--btn-background: $color-white;
// color || hover focus color
$--btn-hover-color: $link-hover-color !default;
// color || active color
$--btn-active-color: #40a9ff !default;
// color || disabled color
$--btn-disabled-color: $disabled-color-base !default;
// color || disabled backgroundColor
$--btn-disabled-background: $disabled-fill-base !default;
// font || font size
$--btn-font-size: $font-size-base !default;
// font || large font size
$--btn-large-font-size: $font-size-medium !default;
// font || icon large font size
$--btn-icon-only-large: $font-size-large !default;
// font || font weight
$--btn-font-weight: 400 !default;
// border
$--btn-border: 1px solid $--btn-border-color !default;
// border radius
$--btn-border-radius: $border-radius-small;
// border radius none
$--btn-no-border-radius: $border-radius-zero;
// shadow || box shadow
$--btn-box-shadow: 0 2px 0 $--btn-shadow-color !default;
// vertical || icon vertical
$--btn-icon-only-vertical: -3px !default;
// vertical || a icon vertical
$--a-btn-icon-only-vertical: -1px !default;
// transition
$--btn-transition: $all-transition;
// line height || button
$--btn-line-height: 1.5715 !default;
// line height || a default
$--a-btn-line-height: 30px !default;
// line height || a large
$--a-btn-large-line-height: 38px !default;
// line height || a small
$--a-btn-large-line-height: 22px !default;
/* -----------基础按钮布局---------- */
// height || default
$--btn-height: 32px !default;
// height || large
$--btn-large-height: 40px !default;
// height || small
$--btn-small-height: 24px !default;
// padding || default
$--btn-padding: 4px 15px !default;
// padding || large
$--btn-large-padding: 6.4px 15px !default;
// padding || small
$--btn-small-padding: 0px 7px !default;
// padding || only icon default
$--bnt-icon-only-padding: 2.4px 0 !default;
// padding || only icon large
$--bnt-icon-large-only-padding: 4.9px 0 !default;
// padding || only icon small
$--bnt-icon-small-only-padding: 0px 0 !default;
// padding || a button padding top
$--a-btn-padding-top: 0.01px !default;
// top right bottom left || button a
$--btn-a-location: 0 !default;

/* 按钮中的内容 */
// opacity || ::before
$--btn-before-opacity: 0.35 !default;
// transition || ::before transition
$--btn-before-transition: opacity 0.2s !default;
// transition || ::before transition
$--btn-icon-transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
// font spacing
$--btn-two-chinese-chars-spacing: 0.34em !default;
/* -----------按钮内容布局---------- */
// width
$--btn-empty-width: 0 !default;
// top right bottom left || ::before
$--btn-before-location: -1px !default;
// zIndex || ::before
$--btn-before-zIndex: 1 !default;
// margin || ywicon margin left
$--btn-icon-margin-left: 8px !default;
// margin || two chinese chars margin right
$--btn-two-chinese-chars-margin-right: -0.34em !default;

/* 组合按钮 */
/* -----------组合按钮布局---------- */
// zIndex || hover focus active zIndex
$--btn-group-hover-zIndex: 2 !default;
// zIndex || disabled zIndex
$--btn-group-disabled-zIndex: 0 !default;
// margin || first child margin left
$--btn-group-first-child-margin: 0 !default;
// padding || child padding
$--btn-group-child-padding: 8px !default;
// padding || small padding
$--btn-group-small-padding: 0px 7px !default;
// padding || only icon padding
$--btn-group-only-icon-padding: 0 !default;


/**
 * 按钮中a元素的布局
 */
@mixin btn-a-layout {
  position: absolute;
  top: $--btn-a-location;
  right: $--btn-a-location;
  bottom: $--btn-a-location;
  left: $--btn-a-location;
}
/**
* 设置按钮的字体颜色， 边框， 背景色
*/
@mixin btn-color($color, $border-color, $background) {
  color: $color;
  border-color: $border-color;
  background: $background;
}
/**
 * 设置按钮的阴影
 */
@mixin btn-shadow($text-shadow, $box-shadow) {
  text-shadow: $text-shadow;
  box-shadow: $box-shadow;
}
/**
 * 设置按钮中a标签样式
 */
@mixin btn-a-style {
  > a:only-child {
    color: currentcolor;
  }
  &::after {
    @include btn-a-layout;
    background: transparent;
    content: '';
  }
}